<!-- 车辆收费记录 -->
<template>
    <div>
        <el-table :data="carData" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="carId" label="车牌号" width="180" />
            <el-table-column prop="vip" label="是否vip" />
            <el-table-column prop="inTime" label="进场时间" :formatter="dateFormat"/>
            <el-table-column prop="outTime" label="出场时间" :formatter="dateFormat" />
            <el-table-column prop="money" label="收费" />
        </el-table>
        <!-- 分页条 -->
        <div class="example-pagination-block">
            <el-pagination layout="prev, pager, next" :total="100" />
        </div>
    </div>
</template>

<script setup lang="ts">
import type {Icar} from "@/util/car";
import {carList} from "@/api/car"
import { ref, reactive } from "vue";
import dayjs from "dayjs"
// 格式化日期
const dateFormat = (row: any) => {return dayjs(row.regtime) .format("YYYY-MM-DD HH:mm:ss");}
// 小车车对象
let carData = ref<Array<Icar>>([]);
// 加载小车车收费数据
function loadCar(){
    carList().then(resp=>{
        if(resp.data.code == 20000){
            console.log(resp.data.data);
            carData.value.splice(0, carData.value.length, ...resp.data.data);
        }
    })
}
loadCar();
</script>

<style scoped>

</style>